<template>
  <input
    type="text"
    :value="modelValue"
    @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)"
  />

  <!-- <input
    type="text"
    :value="psd"
    @input="emit('update:psd', (<HTMLInputElement>$event.target).value)"
  /> -->
</template>

<script setup lang="ts" name="AtguiguInput">
defineProps(["modelValue", "psd"]);
const emit = defineEmits(["update:modelValue", "update:psd"]);

/**
 * $event到底是啥？ 啥时候能.target
 * 对于原生事件，$event就是事件对象 ===>能.target
 * 对于自定义事件， $event就是触发事件时，所传递的数据 ==>不能.target
 */
</script>

<style scoped>
input {
  border: 2px solid black;
  background-image: linear-gradient(45deg, red, yellow, green);
  height: 30px;
  font-size: 20px;
  color: white;
}
</style>
